<script setup lang="ts">
import { computed } from "vue";
import Taro, { useRouter } from "@tarojs/taro";

import Page from "@/components/common/Page.vue";
import StepItem from "./components/StepItem.vue";
import Result from "@/pages/merchant/components/Result.vue";
import ContentTip from "@/pages/index/components/ContentTip.vue";

import useFetch from "@/hooks/useFetch";
import ApiMerchant from "@/api/merchant";

import { TStaffResult } from "@/global";

const { params } = useRouter<{
  // 申请商户
  mid: `${number}`;
}>();

// 查询报名数据
const { data, refresh } = useFetch<TStaffResult>(
  ApiMerchant.applyMerchantStaffResult,
  {
    defaultParams: { merchant_id: parseInt(params.mid) },
    afterFetch: (res: any) => res,
    showLoading: true,
  }
);

const statusMap = {
  applied: {
    title: "审核中",
    desc: "等待品牌管理员审核",
    image: "/static/svg/enroll-applyed.svg",
  },
  fail: {
    title: "很遗憾，审核不通过",
    desc: "很抱歉，您未通过品牌审核，\n",
    image: "/static/svg/enroll-refused.svg",
  },
  // unpay: {
  //     // title: "提交成功！",
  //     desc: "活动结束后，\n押金将在15个工作日内返还",
  //     btnText: "支付押金"
  // },
};

// 简化状态
const aliasStatus = computed(() => {
  const EnumStatus = {
    1: "applied",
    2: "success",
    3: "fail",
  };
  const { status } = data.value || {};
  return EnumStatus[status];
});

const resultView = computed(() => {
  const status = aliasStatus.value;
  const res = { ...statusMap[status] };

  return res;
});

// 按钮事件
const handleBtnTap = () => {
  Taro.reLaunch({ url: "/pages/merchant/index?mid=" + params.mid });
};
</script>

<template>
  <Page height="260rpx">
    <view class="mt-3 flex justify-around">
      <StepItem type="success" title="提交申请" />
      <StepItem
        :type="
          data?.status == 1 ? 'waiting' : data?.status == 2 ? 'success' : 'fail'
        "
        :title="
          data?.status == 1
            ? '等待审核'
            : data?.status == 2
            ? '审核通过'
            : '不通过'
        "
      />
    </view>

    <template v-if="data?.status == 2">
      <ContentTip
        :congrat="aliasStatus == 'success'"
        :btn-text="'进入品牌页面'"
        @btn-tap="handleBtnTap"
      >
        <view class="text-primary text-center">
          <view class="mb-5 text-[40px]">
            <view>恭喜您</view>
            <view>加入品牌成功！</view>
          </view>
        </view>
      </ContentTip>
    </template>

    <view v-else class="mt-[200px]">
      <Result v-bind="resultView" />
    </view>
  </Page>
</template>
